<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title th:replace="${title}">title</title>
    <!-- Styles -->
    <link href="css/page.min.css" th:href="@{/default/css/page.min.css}" rel="stylesheet">
    <link href="css/style.css" th:href="@{/default/css/style.css}" rel="stylesheet">
    <link href="css/new.min.css" th:href="@{/default/css/new.min.css}" rel="stylesheet">
    <link href="css/jp.css" th:href="@{/default/css/jp.css}" rel="stylesheet">
    <link href="css/notification.css" th:href="@{/default/css/notification.css}" rel="stylesheet">
    <link href="css/article.css" th:href="@{/default/css/article.css}" rel="stylesheet">
    <link href="css/comment.css" th:href="@{/default/css/comment.css}" rel="stylesheet">
    <link href="https://unpkg.com/element-plus@1.0.2-beta.33/lib/theme-chalk/index.css" rel="stylesheet">

    <!-- /.Styles-->
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="#">
    <link rel="icon" href="#">
    <script>
        var web = {cpath:''}
        //        window.addEventListener('touchmove', func, { passive: false });
    </script>
</head>
<body>
<!-- menu -->
<nav class="navbar navbar-expand-lg navbar-stick-dark navbar-light" data-navbar="sticky" th:fragment="menu(n)">
    <div class="container">
        <div class="navbar-left">
            <button class="navbar-toggler" type="button">☰</button>
            <a class="navbar-brand" href="http://jpress.io/">
                <img class="logo-dark" src="#" alt="logo">
                <img class="logo-light" src="#" alt="logo">
            </a>
        </div>
        <section class="navbar-mobile">
            <ul class="nav-navbar nav ml-auto">
                <li class="nav-item"><a class="nav-link" th:classappend="${n==1} ? 'active'" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==2} ? 'active'" href="#">社区</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==3} ? 'active'" href="#">案例</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==4} ? 'active'" href="#">模板</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==5} ? 'active'" href="#">企业版</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==6} ? 'active'" href="#">插件</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==7} ? 'active'" href="#">小程序</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==8} ? 'active'" href="#">文档</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==9} ? 'active'" href="#">博客</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==10}? 'active'" href="#">加入VIP</a></li>
                <li class="nav-item"><a class="nav-link" th:classappend="${n==11}? 'active'" href="#">官方服务</a></li>
            </ul>
            <div class="nav-download d-inline-flex">
                <a class="nav-link" href="../ucenter/user_login.html" th:href="@{/login}">登录</a>
                <a class="btn" href="../ucenter/user_register.html" th:href="@{/regist}">注册</a>
            </div>
        </section>
    </div>
</nav>

<!-- Header -->
<header class="header text-center text-white" th:fragment="header" style="background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);">
    <div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <h1>博客</h1>
                <p class="lead-2 opacity-90 mt-6">分享历程，记录经验，积累点滴，实现自我...</p>

            </div>
        </div>

    </div>
</header>

<!-- SiderBar -->
<div class="sidebar px-4 py-md-0" th:fragment="SideBar">
    <div>
        <h6 class="sidebar-title">文章搜索</h6>
        <form id="searchform" action="#" class="input-group" method="GET" target="_blank">
            <input type="search" class="form-control" name="keyword" placeholder="输入关键字" autocomplete="off">
            <div class="input-group-addon" onclick="">
                <span class="input-group-text"><i class="el-icon-search" ></i></span>
            </div>
        </form>
        <hr>
    </div>
    <div>
        <h6 class="sidebar-title">分类</h6>
        <div class="row link-color-default fs-14 lh-24">
            <div class="col-6" th:each = "ArticleCategory : ${categories}"><a href="#" th:text = "${ArticleCategory.title}">测试分类</a></div>
        </div>
        <hr>
    </div>
    <div>
        <h6 class="sidebar-title">热门文章</h6>
        <hr>
        <h6 class="sidebar-title">Tags</h6>
        <div class="gap-multiline-items-1">
            <a class="badge badge-secondary" th:each = "ArticleCategory : ${tags}" th:text = "${ArticleCategory.title}" href="#">测试标签</a>
        </div>
        <hr>
    </div>
    <div>
        <h6 class="sidebar-title">关于</h6>
        <p>关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于</p>
        <hr>
    </div>

</div>
<!--分页-->
<nav>
        <div class="block">
            <span class="demonstration">跳转页面</span>
            <hr>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="true"
                    :current-page="currentPage4"
                    :page-sizes="[5, 15, 20, 25, 30]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                <!--total 是传入总数-->
            </el-pagination>
        </div>
    <script>
        export default {
            methods: {
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            },
            data() {
                return {
                    currentPage1: 5,
                    currentPage2: 5,
                    currentPage3: 5,
                    currentPage4: 4
                };
            }
        }
    </script>
</nav>
<!--分页_END-->
<!-- Footer -->
<footer class="footer py-7" th:fragment="footer">
    <div class="container">
        <div class="row">

            <div class="col-12">
                <p><a href="#"><img style="width: 10%" src="#" alt="logo"></a></p>
            </div>
            <div class="col-xl-5" style="word-wrap:break-word">
                <div>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter</div>
                <hr class="d-xl-none">
                <p><small></small></p>
            </div>
            <div class="col-4 col-xl-2 offset-xl-1">
                <div class="nav flex-column">
                    <a class="nav-link" href="#">关于</a>
                    <a class="nav-link" href="#">线路图</a>
                    <a class="nav-link" href="#">常见问题</a>
                </div>
            </div>

            <div class="col-4 col-xl-2">
                <div class="nav flex-column">
                    <a class="nav-link" href="#">文档</a>
                    <a class="nav-link" href="#">帮助</a>
                    <a class="nav-link" href="#">下载</a>
                </div>
            </div>
            <div class="col-4 col-xl-2">
                <div class="nav flex-column">
                    <a class="nav-link" href="#">合作</a>
                    <a class="nav-link" href="#">入驻</a>
                    <a class="nav-link" href="#">广告</a>
                </div>
            </div>

        </div>
    </div>
</footer>

<!--script-->
<th:block th:fragment="scripts">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="../default/js/page.min.js" th:src="@{/default/js/page.min.js}" ></script>
    <script type="module" src="../default/js/main.js" th:src="@{/default/js/main.js}" ></script>
    <script src="https://unpkg.com/element-plus@1.0.2-beta.33/lib/index.full.js" ></script>
</th:block>
</body>
</html>
